<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/photo.css}">
   <link rel="stylesheet" th:href="@{/static/css/viewer.min.css}">
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  
   <link rel="stylesheet" href="../../static/css/me.css">
   
   <style type="text/css">
    	
#file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
#file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
#file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}	
   </style>
   
   <script src="/static/js/viewer.min.js"></script>
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</head>
<body >

  
  <!--导航-->
  <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">管理后台</h2>
        <a href="/admin/blogs"class=" m-item item m-mobile-hide"><i class=" home icon"></i>博客</a>
        <a href="/admin/types" class=" m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
        <a href="/admin/tags" class="m-item item m-mobile-hide"><i class="tags icon" data-filtered="filtered"></i> &nbsp;标签</a>
        <a href="/admin/phototype" class="active m-item item m-mobile-hide"><i class="image icon" data-filtered="filtered"></i> &nbsp;相册</a>  
        <div class="right m-item m-mobile-hide menu">
          <div class="ui dropdown  item">
            <div class="text">
              <img class="ui avatar image" src="/static/img/bozhu.jpg">
              益达
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <a href="/admin/logout" class="item">注销</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>
  
  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
      
		       <form   action="/admin/photoinput" method="post" enctype="multipart/form-data" id="formimg">
		             <div class="item" id="anniu">
		                   <span  id="file">上传文件
		                       <input type="file" name="file" id="fileid" multiple="multiple">
		                   </span>
		                       <input type="hidden" name="id" th:value="${phototype?.id}">
		                       <input type="hidden" name="name" th:value="${phototype?.name}">
		              </div>
		       </form>
		       

      </div>
    </div>
  </div>

    
   <div class="container mt-4">
    
      <div class="row">
        <div class="col-12">
        
           <div class="card text-center"> 
               <div class="card-body ">
                 <div class="layui-anim layui-anim-rotate card-title"><h3 th:text="${phototype.name}">Smile-相册</h3></div>
               </div>
           </div>
         
          </div>
      </div>
    
       <div class="row" style="margin-top: 20px" id="dowebok">
       
          <div th:each="photo:${photos}" style="margin-top: 15px" class="col-6 col-sm-6 col-md-4">
           <div class="card">
              <img  class="layui-anim layui-anim-scaleSpring img-fluid img-thumbnail" th:src="${photo.imgurl}">
              <p align="center"> 
                     <button th:onclick="deletetype([[${photo.id}]],[[${photo.imgurl}]]);"   type="button" class="adminzi btn btn-danger">删除</button>
                     
              </p>
           </div>
         </div>
   
          
   <!-- 对应row -->      
   </div>

    </div>
    
    </body>
    
    
    
     
    <script type="text/javascript">
      $('.zij').dimmer({
             on: 'hover'
                      });
     // $('.segment').dimmer('hide');
    //收起导航栏
       $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
       });

       $('.ui.dropdown').dropdown({
          on : 'hover'
            });
      
     
       var viewer = new Viewer(document.getElementById('dowebok'), {
	      url: 'data-original'
          });
  
  //上传图片
		   $("#fileid").change(function(){
		            if($(this).val()){
		           // alert("2");
		            $("#formimg").submit();
		            }
		        }); 
      
     
            
    
    //删除相册
      function deletetype(id,imgurl){
      
       if(confirm("确认删除吗？")){
        $.ajax({
               url: '/admin/photodelete',
               data:{'id':id,'imgurl':imgurl},
               type:"post",
               dataType:"json",
               success:function(data){
                 if(data["result"]){
                    alert("删除成功！");
                    window.location.reload();
                 }else{
                     alert("删除失败！");
                 }
               }
         
         }); 
         
         }
      }
      
     
    
    </script>
    </html>
    